<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="content_box pd-30" v-if="Object.keys(detail).length > 0">
			<view class="bg  bd-r40 pd-30">
				<view class="card_box flex-c-center">
					<image class="imgs bd-r40" :src="detail.cover" mode="aspectFill">
					</image>
					<view class="ft-32 c-33 fw-800 mt-20">{{ detail.name }}</view>
					<view class="ft-20 c-33  mt-20">
						{{ '价值￥' }}
						<span class="ft-num3 c-33">{{ detail.exchange_price }}</span>
						元
					</view>
				</view>
				<view class="form_box">
					<view class="form_box_item flex-bwt pd-20">
						<view class="label">所需积分 </view>
						<view class="rig ft-24"> <span class="intefral_num">
								{{ parseInt(detail.integral * form.count) }}
							</span>
						</view>
					</view>
					<view class="form_box_item flex-bwt pd-noR">
						<view class="label">兑换数量 </view>
						<view class="rig">
							<!-- 进步器 -->
							<view class="number_box flex">
								<view class="btn reduce flex-center" @click="reduce">
									-
								</view>
								<view class="num_count ft-28 fw-800 flex-center">
									{{ form.count }}
								</view>
								<view class="btn add flex-center" @click="add">
									+
								</view>
							</view>
						</view>
					</view>
					<view class="form_box_item flex-bwt pd-noR">
						<view class="label">收货地址 </view>
						<view class="rig">
							<view class="selectAdd" @click="showPup = true">
								<span class="te-3 ft-24 c-66" v-if="!form.address || form.address == ''">
									{{ '请选择' }}</span>
								<view class="te-3 ft-24 c-66" v-html="form.addressHtml" v-else></view>
								<image class="icons" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"
									mode="aspectFit">
								</image>

							</view>

						</view>
					</view>
					<view class="form_box_item flex-bwt  pd-20">
						<view class="label">礼品介绍 </view>
						<view class="rig ft-24 c-66">
							<view v-html="detail.des"></view>
						</view>
					</view>
					<view class="rules_box ft-22 c-99 pd-20 bd-r20">
						<view v-html="detail.content"></view>
					</view>
				</view>
				<view :style="{ height: (98 + 68) + 'rpx' }">

				</view>

			</view>
		</view>
		<view :style="{ height: (98 + 68) + 'rpx' }"></view>


		<view class="btn_box">
			<view class="btn mt-20" v-if="detail.my_integral >= parseInt(detail.integral * form.count)"
				@click="showDialog = true">
				立即兑换
			</view>
			<view class="btn no mt-20" v-else>
				积分不足
			</view>
		</view>
	</view>
	<!-- 删除弹窗 -->
	<view class="delete_box" ref="diaLogPop" v-if="showDialog">
		<view class="bg"></view>
		<view class="delete_model bd-r40">
			<view class="ft-32 c-33 fw-800 mt-30">{{ '提交礼品兑换' }}</view>
			<view class="c-99 ft-28 text pd-30">
				<!-- <view v-html="option.html"></view> -->
				{{ detail.name }} ×{{ form.count }} <span style="color:#FF0000 ;">（- {{ detail.integral * form.count
				}}积分）</span>
			</view>
			<view class="btn_model flex-eve">
				<view class="btn" @click="close">取消</view>
				<view class="btn sunbmit" @click="confirm()">确认兑换</view>
			</view>
		</view>
	</view>
	<!-- 地址弹窗 -->
	<u-popup :show="showPup" @close="closePopup" :round="20">
		<!-- 弹窗标题与关闭按钮 -->
		<view class="popup-header">
			<text class="ft-32 c-33 fw-800">选择收件地址</text>
			<view @click="closePopup">
				<image class="icons" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png" mode="aspectFit">
				</image>
			</view>
		</view>
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view class="pop_card_box pd-30">
				<!-- <scroll-view scroll-y="true"> -->
				<view class="pop_card_box_item ft-24" @click="selectAdd(item)" v-for="(item, index) in addressList"
					:key="index">
					<text class="c-33 fw-800">{{ item.name }} {{ item.phone }}</text>
					<view class="c-66 mt-20">{{ item.area.join('') }}{{ item.addr }}</view>
				</view>
				<view class="address_botton flex-center bd-r20 ft-24 c-33" @click="goAddress">
					<image class="icons mr-8" src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png"
						mode="aspectFit">
					</image>
					添加收件地址
				</view>
			</view>
		</scroll-view>

	</u-popup>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from 'vue';
import navHead from '@/components/navHead.vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLoad,
	onShow,
} from "@dcloudio/uni-app";
const headData = reactive({
	color: '#fff',
	title: '兑换礼品'
})
const form = ref({
	count: 1,
	address: ''
})

const addressId = ref('')
const selectAdd = (data) => {
	form.value.address = data.name + ' ' + data.phone + data.area.join('') + data.addr
	form.value.addressHtml = data.name + ' ' + data.phone + '<br/>' + data.area.join('') + data.addr

	addressId.value = data.id
	closePopup()
}
let showPup = ref(false)
// 关闭弹窗
const closePopup = () => {
	showPup.value = false

};
const showDialog = ref(false)
const close = () => {
	showDialog.value = false
}
const add = () => {
	if (form.value.count < 10) form.value.count++
}
const reduce = () => {
	if (form.value.count > 1) form.value.count--
}
const goAddress = () => {
	uni.navigateTo({
		url: '/subpackage/address/addAddress?type=add',
		events: {
			// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			getListApi: function (data) {
				console.log('哈哈哈哈哈')
				addressLoading.value = true
				addressList.value = []
				getAddressListData()
			},


		}
	})
}
const id = ref('')
const detail = ref({})
const isSettings = ref(false)
const defaults = reactive(['zXI3UtEmD2N9uVrRsLxlLXpkAW28jy2fHhTJ7wQBbh0', 'J7KakL2Hmx_dHAHiK0T4mzEZ_RqZ1S9ANXKwTyiejrc'])//发货通知 / 包裹签收提醒
onLoad((options) => {
	id.value = options?.id || ''
	utils
		.request(
			api.getIntegralMallDetail, {
			id: id.value,
		},
			"get"
		)
		.then((res) => {
			detail.value = res.data.info
			detail.value.my_integral = options.num
		});

	getAddressListData()
	wx.getSetting({
		withSubscriptions: true,

		success(res) {
			if (res.subscriptionsSetting.itemSettings) {

				isSettings.value = defaults.some(f => res.subscriptionsSetting.itemSettings[f])
			}
		}
	})
})

const lower = () => {
	getAddressListData()
}

const addressPage = ref(1)
const addressList = ref([])
const addressLoading = ref(true)
const getAddressListData = () => {
	if (!addressLoading.value) {
		return
	}
	uni.showLoading()
	addressLoading.value = false
	utils
		.request(
			api.getAddressList, {
			page: addressPage.value,
			pageSize: 10
		},
			"get"
		)
		.then((res) => {
			addressPage.value++
			if (res.data.items.length > 0) {
				addressList.value = addressList.value.concat(res.data.items)
			}
			if (addressPage.value <= res.data.pageInfo.totalPage) {
				addressLoading.value = true
			}
			uni.hideLoading()
		});
}

const confirm = () => {

	// 订阅消息
	if (!isSettings.value) {
		wx.requestSubscribeMessage({
			tmplIds: defaults,
			success(res) {
				utils.subscribeMessage(res)
			},
			complete(res) {
				submit()
			}
		})
	} else {
		submit()

	}


}
const submit = () => {
	utils
		.request(
			api.subIntegralOrder, {
			id: id.value,
			num: form.value.count,
			address_id: addressId.value
		},
			"post"
		)
		.then((res) => {
			uni.redirectTo({
				url: "/subpackage/integral/integralOrderList"
			})
		});
}
</script>

<style lang="scss" scoped>
/* 头部与关闭按钮 */
.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #eee;
	font-size: 28rpx;
	background-color: #F8F8F8;
	border-radius: 40rpx 40rpx 0 0;

	.icons {
		width: 36rpx;
		height: 36rpx;
	}
}

.pop_card_box {
	height: 750rpx;
	background-color: #F8F8F8;

	.pop_card_box_item {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.address_botton {
		background-color: #F1F1F1;
		padding: 20rpx 0;
		margin-bottom: 30rpx;

		.icons {
			width: 32rpx;
			height: 32rpx;
		}
	}



}




.content_box {
	.bg {
		background-color: #F8F8F8;
	}

	.card_box {
		.imgs {
			width: 186rpx;
			height: 232rpx;
		}
	}

	.form_box {
		.form_box_item {
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;

			.label {
				flex-shrink: 0;
				font-size: 24rpx;
				color: #333;
				font-weight: 800;
				width: 180rpx;
			}

			.rig {
				text-align: right;

				.intefral_num {
					color: #FF0000;
					font-weight: 800;
				}

			}

			.selectAdd {
				text-align: right;
				display: flex;

				.icons {
					width: 24rpx;
					height: 24rpx;
					flex-shrink: 0;
					margin: 4rpx 10rpx 0 10rpx;
				}
			}
		}

		.rules_box {
			background: linear-gradient(to bottom, #ffffff00, #FFFFFF);
		}

		.pd-noR {
			padding: 15rpx 5rpx 15rpx 20rpx;

			.icons {
				width: 24rpx;
				height: 24rpx;
				flex-shrink: 0;
			}
		}
	}
}

.btn_box {
	position: fixed;
	width: 100%;
	// height: 140rpx;
	bottom: 0;
	left: 0;
	background-color: #F8F8F8;
	padding: 0 30rpx;
	box-sizing: border-box;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

	.btn {
		width: 100%;
		height: 78rpx;
		background: linear-gradient(90deg, #DBF046 0%, #FFBA61 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		line-height: 78rpx;
		font-size: 28rpx;
		color: #333
	}

	.no {
		border: 2rpx solid #6b6b6b;
		background: #fff;
		color: #333;
	}
}

.number_box {
	color: #333;

	.num_count {
		width: 56rpx;
		height: 42rpx;
		border: 2rpx solid #333;
		border-radius: 8rpx;
		// margin: 0 10rpx;
	}

	.btn {
		width: 40rpx;
		height: 100%;
		font-size: 28rpx;
		font-weight: 800;
		// background-color: red;

	}

}

.delete_box {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 10;


	.bg {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #999;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.delete_model {
		position: absolute;
		background-color: #fff;
		text-align: center;
		width: 518rpx;
		// height: 386rpx;
		top: calc(50% - (386rpx / 2));
		left: calc(50% - (518rpx / 2));

		.text {
			// padding: 20rpx;
			min-height: 140rpx;
		}

		.btn_model {
			margin-bottom: 30rpx;

			.btn {
				width: 184rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #333;
				background-color: #F8F8F8;
			}

			.sunbmit {
				background-color: #333;
				color: #DBF046;
			}
		}
	}

}
</style>